<template>
	<div>
		<div class="mofootBase">
			<ul>
				<li v-for="(item,index) in navlist" :key="item.name"
				 :class="{active:navi===index}" @click="navi=index">
					<i @click="tonav(item.url)" :class="item.iconB"></i>
					<p @click="tonav(item.url)">{{item.name}}</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tomurout: 0,
				footList: [],
				showTrue: false,
				navlist: [{
						iconB: "iconfont icon-yemian",
						name: "首页",
						url: "/index",
						active: true
					},
					{
						iconB: "iconfont icon-shuben",
						name: "学术期刊",
						url: "/periodical",
						active: false
					},
					{
						iconB: "iconfont icon-huiyi1",
						name: "会议培训",
						url: "/meeting",
						active: false
					},

					{
						iconB: "iconfont icon-shipin3",
						name: "直播课堂",
						url: "/streaming",
						active: false
					},
					{
						iconB: "iconfont icon-wode",
						name: "个人中心",
						url: "/moPersonal",
						active: false
					},
					{
						iconB: "iconfont icon-wode",
						name: "登录",
						url: "/login",
						active: false
					}

				],
				navi: 0,
			};
		},
		methods: {
			tonav(url) {
				this.$uniRouter.push({
					path: url
				});
			},
		}
	};
</script>

<style lang="less" scoped>
	a {
		text-decoration: none;
	}

	.mofootBase {
		width: 100%;
		height: 108rpx;
		background: #fff;
		box-shadow: 1rpx -1rpx 10rpx 0rpx rgba(166, 166, 166, 0.3);
		position: fixed;
		bottom: 0;
		z-index: 999;

		.active {
			i {
				color: #003c80 !important;
			}

			p {
				color: #003c80;
			}
		}

		ul {
			padding: 0;
			width: 100%;
			height: 100%;

			li {
				width: 20%;
				height: 100%;
				text-align: center;
				float: left;
				list-style: none;
				position: relative;

				i {
					color: #a6a6a6;
					font-size: 44rpx;
					position: relative;
					top: 12rpx;
					display: inline-block;
				}

				p {
					margin-top: 16rpx;
					color: #a6a6a6;
					font-size: 26rpx;
				}
			}

			.tomurout {
				i {
					color: #003c80 !important;
				}

				p {
					color: #003c80 !important;
				}
			}
		}
	}

	.router-link-active {
		i {
			color: #003c80 !important;
		}

		p {
			color: #003c80 !important;
		}
	}

	@media screen and (min-width: 1010px) {
		#mofootBase {
			display: none;
		}
	}
</style>
